<template>
  <div class="edit_profile">
    <myheader title="编辑个人信息">
      <van-icon
        name="arrow-left"
        slot="left"
        @click="$router.go(-1)"
      />
      <van-icon
        name="wap-home"
        slot="right"
        @click="$router.push({ path: '/index' })"
      />
    </myheader>
    <div class="userimg">
      <img
        :src="currentUser.head_img"
        alt=""
      />
      <van-uploader :after-read="afterRead" />
    </div>
    <mycell
      title="昵称"
      :desc="currentUser.nickname"
      @click="nicknameshow = !nicknameshow"
    >
    </mycell>
    <van-dialog
      v-model="nicknameshow"
      title="修改昵称"
      show-cancel-button
      @confirm="updatenickname"
    >
      <van-field
        v-model="name"
        label="文本"
        placeholder="请输入用户名"
      />
    </van-dialog>
    <mycell
      title="密码"
      :desc="currentUser.password"
      type="password"
      @click="passshow=!passshow"
    ></mycell>
    <van-dialog
      :before-close='beforeClose'
      @open='openPass'
      v-model="passshow"
      title="修改密码"
      show-cancel-button
      @confirm="updatepassword"
    >
      <van-field
        v-model="oldpass"
        required
        label="旧密码"
        placeholder="请输入旧密码"
      />
      <van-field
        v-model="newpass"
        required
        label="新密码"
        placeholder="请输入新密码"
      />
    </van-dialog>
    <mycell
      @click="gendershow=!gendershow"
      title="性别"
      :desc="currentUser.gender === 0 ? '女' : '男'"
    ></mycell>
    <van-dialog
      v-model="gendershow"
      title="修改性别"
      show-cancel-button
      @confirm="updategender"
    >
      <van-picker
        :columns="['女','男']"
        @change="onChange"
        :default-index="currentUser.gender"
      />
    </van-dialog>
  </div>
</template>

<script>
import myheader from "@/components/myheader.vue";
import { getUserByid, editUser } from "@/apis/user.js";
import mycell from "@/components/mycell.vue";
import { fileUpload } from "@/apis/fileUpload.js";
export default {
  data() {
    return {
      currentUser: {},
      nicknameshow: false,
      passshow: false,
      gendershow: false,
      name: "",
      oldpass: "",
      newpass: "",
      newgender: "",
    };
  },
  components: {
    myheader,
    mycell,
  },
  methods: {
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let formData = new FormData();
      formData.append("file", file.file);
      let res = await fileUpload(formData);
      if (res.data.message == "文件上传成功") {
        this.currentUser.head_img = "http://127.0.0.1:3000" + res.data.data.url;
        let res2 = await editUser(this.currentUser.id, {
          head_img: res.data.data.url,
        });
        if (res2.data.message === "修改成功") {
          this.$toast.success("修改成功");
        } else {
          this.$toast.fail("修改失败");
        }
      } else {
        this.$toast.fail("文件上传失败");
      }
    },
    async updatenickname() {
      let res = await editUser(this.currentUser.id, { nickname: this.name });
      if (res.data.message == "修改成功") {
        this.$toast.success("修改成功");
        this.currentUser.nickname = this.name;
      } else {
        this.$toast.fail("修改失败");
      }
    },
    openPass() {
      this.oldpass = this.newpass = "";
    },
    async updatepassword() {
      if (this.oldpass == this.currentUser.password) {
        let res = await editUser(this.currentUser.id, {
          password: this.newpass,
        });
        console.log(res);
        if (res.data.message == "修改成功") {
          this.$toast.success("修改成功");
          this.currentUser.password = this.newpass;
        } else {
          this.$toast.fail("修改失败");
        }
      } else {
        this.$toast.fail("原密码输入错误");
      }
    },
    beforeClose(action, done) {
      if (action == "cancel") {
        done();
      } else {
        if (this.oldpass != this.currentUser.password) {
          done(false);
        } else {
          done();
        }
      }
    },
    onChange(a, b, c) {
      this.newgender = c;
    },
    async updategender() {
      let res = await editUser(this.currentUser.id, { gender: this.newgender });
      if (res.data.message == "修改成功") {
        this.$toast.success("修改成功");
        this.currentUser.gender = this.newgender;
      } else {
        this.$toast.fail("修改失败");
      }
    },
  },
  async mounted() {
    let res = await getUserByid(this.$route.params.id);

    if (res.data.message == "获取成功") {
      this.currentUser = res.data.data;
      this.name = this.currentUser.nickname;
      if (this.currentUser.head_img) {
        this.currentUser.head_img =
          "http://127.0.0.1:3000" + this.currentUser.head_img;
      } else {
        this.currentUser.head_img =
          "http://127.0.0.1:3000" + "/uploads/image/IMG1568705287936.jpeg";
      }
    }
  },
};
</script>

<style lang="less" scoped>
.edit_profile {
  .userimg {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    > img {
      width: 90 * 100vw/360;
      height: 90 * 100vw/360;
    }
  }
  /deep/ .van-uploader__upload {
    width: 90 * 100vw/360;
    height: 90 * 100vw/360;
  }
  /deep/ .van-uploader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
</style>
